import React from 'react'
import { createRoot } from 'react-dom/client'

function Hello() {
  // 函数式组件中 this 是 undefined
  // !为什么是 undefined？
  console.log(this)
  // 代码最终会经过 babel 转换，开启严格模式，而严格模式下直接调用函数，内部 this 就是 undefined
  return <h1>Hello World</h1>
}

// const Hello = () => <h1>Hello World</h1>

// createRoot(渲染到哪儿).render(渲染谁)
// render 渲染函数式组件的过程？
// render 函数解析标签 <Hello/>，发现是一大写字母开头的，所以会当作组件进行解析
// 又发现是一天函数组件，所以内部会直接调用 Hello() 得到 JSX，转成 React.createElement
// React.ceateElement 的返回值是虚拟 DOM
// render 负责把虚拟 DOM 转成真实 DOM 渲染到页面上
createRoot(document.querySelector('#root')).render(<Hello />)

// 下面写法可以出来吗？可以，只不过下面的写法当作普通函数来使用
// createRoot(document.querySelector('#root')).render(Hello())
// 双标签也 ok
// createRoot(document.querySelector('#root')).render(<Hello></Hello>)
